<template>
  <div class="h-100 right_box">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span style="color: #a0a3a8">设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="harderBox">
            <el-form-item>
              <el-button type="success" class="max_btn btnSizeStyle" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="addUser('添加电子警察')">添加电子警察</el-button>
            </el-form-item>
            <el-form-item label="添加时间:">
              <el-date-picker
                v-model="harderBox.value1"
                :picker-options="pickerBeginDateBefore"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="harderBox.nameList" clearable prefix-icon="el-icon-search" placeholder="输入电子警察名称" class="search_btn search_icon"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">查询</el-button>
            </el-form-item>
            <!-- <el-form-item><el-button type="primary" size="small" plain>导出</el-button> </el-form-item>
            <el-form-item><el-button type="primary" size="small" plain @click="Dayin">打印</el-button> </el-form-item>-->
          </el-form>

          <!-- 表格 -->
          <el-table
            stripe
            border
            :data="rolelist"
            highlight-current-row
            id="printcontent"
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
            v-loading="tableLoad"
            @sort-change="sortthiscolumn"
          >
            <!-- :default-sort="{ prop: 'tjsj', order: 'descending' }" -->
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>
            <!-- <el-table-column type="expand" fixed="left">
            <template slot-scope="scope">
              <ul>
                <li v-for="item in scope.row.ziChanList" :key="item.ZCMC">
                  <div class="openSheBei">
                    <span>
                      <i
                        :class="[iconBtn, 'cao']"
                        @click="caonima"
                        v-show="item.ZCLX !== 53 ? false : true"
                      ></i>
                      {{item.ZCMC}}
                    </span>
                    <el-tag size="medium" type="success" v-show="item.ZCLXMC">{{item.ZCLXMC}}</el-tag>
                    <div class="cedao">
                      控制车道:
                      <span v-for="cao in item.cds" :key="cao.id">{{cao.cdmc}}、</span>
                    </div>
                    <div class="caoxian">朝向：{{item.FXMC}}</div>
                    <div>
                      <el-button
                        type="text"
                        class="color_f56f6f"
                        @click="yichuSheb(item)"
                        :disabled="quanxianBtns.btn6"
                      >移除</el-button>
                      <span class="operation"></span>
                      <el-button
                        type="text"
                        :disabled="item.IP !== '' && item.IP !== null ? false : true"
                        class="Btn_nan"
                        @click="yuanChenKZ(item)"
                      >远程控制</el-button>
                      <span class="operation"></span>
                      <el-button
                        :disabled="item.IP !== '' && item.IP !== null ? false : true"
                        type="text"
                        @click="showPingOk(item)"
                      >ping</el-button>
                    </div>
                  </div>
                  <div
                    v-show="iconBtnShow"
                    v-if="item.ZCLX !== 53 ? false : true"
                    class="openSheBei"
                  >
                    <span>369</span>
                    <el-tag size="medium" type="success">123</el-tag>
                    <div>
                      <el-button type="text" class="color_f56f6f">移除</el-button>
                      <span class="operation"></span>
                      <el-button type="text" class="Btn_nan">远程控制</el-button>
                      <span class="operation"></span>
                      <el-button type="text">ping</el-button>
                    </div>
                  </div>
                </li>
                <li v-for="item2 in scope.row.kaKouList" :key="item2.ZCMC" class="openSheBei2">
                  <span>{{item2.ZCMC}}</span>
                  <el-tag size="medium" type="warning">{{'卡口'}}</el-tag>
                  <div>
                    <el-button
                      type="text"
                      class="color_f56f6f"
                      :disabled="quanxianBtns.btn4"
                      @click="yichuKK(item2)"
                    >移除</el-button>
                  </div>
                </li>
              </ul>
            </template>
            </el-table-column>-->
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <el-table-column label="电子警察名称" prop="kkmc" sortable :show-overflow-tooltip="true" min-width="150">
              <template slot-scope="scope">
                <svg class="iconfont img_shouji2" aria-hidden="true" v-show="scope.row.isbind">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                <span class="fontColor" v-html="getzcmc(scope.row)" @click="userBox(scope.row)" style="padding-left: 20px"></span>
                <!-- <el-tooltip placement="top-start" effect="light" class="bandinGuanxi">
                <div slot="content">已绑定</div>
                <svg class="iconfont img_shouji" aria-hidden="true" style="margin: 2px 0 0 0" v-show="scope.row.isbind">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                </el-tooltip>-->
                <!-- <el-tooltip effect="dark" placement="top-start" v-if="scope.row.dzjcmc === null || scope.row.dzjcmc.length > 8 ? true : false">
                <div slot="content">{{ scope.row.dzjcmc }}</div>
                <el-button type="text" @click="userBox(scope.row)" class="detailsBtn">{{ scope.row.dzjcmc }}</el-button>
              </el-tooltip>
                <el-button type="text" class="detailsBtn" @click="userBox(scope.row)" v-if="scope.row.dzjcmc === null || scope.row.dzjcmc.length > 8 ? false : true">{{ scope.row.dzjcmc }}</el-button>-->
              </template>
            </el-table-column>
            <el-table-column label="安装地址" prop="xqmc" show-overflow-tooltip min-width="150">
              <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.xqmc + scope.row.jdmc + scope.row.xxdz }}</template>
            </el-table-column>
            <el-table-column label="绑定关系" min-width="100">
              <template slot-scope="scope">
                <el-button type="text" :disabled="!scope.row.isbind" @click="kakoubandin(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="电子警察入网码" prop="dzjcrwbm" width="120"></el-table-column>
            <!-- <el-table-column label="道路等级" prop="dldj"></el-table-column> -->
            <el-table-column label="车道数" prop="cds"></el-table-column>
            <!-- <el-table-column label="方向数" prop="fxs"></el-table-column>
            <el-table-column label="触发类型" prop="cflx_MC"></el-table-column>
            <el-table-column label="小型车限速" prop="xxcxs"></el-table-column>
            <el-table-column label="大型车限速" prop="dxcxs"></el-table-column>-->
            <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
            <el-table-column label="添加时间" prop="tjsj" sortable min-width="150">
              <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
            </el-table-column>
            <!-- <el-table-column label="开启人脸" prop="sfkqrl">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sfkqrl === 1 ? 'success' : 'danger'" size="medium">{{ scope.row.sfkqrl === 1 ? '已启用' : '未启用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="开启二次识别" prop="sfkqecsb" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sfkqecsb === 1 ? 'success' : 'danger'" size="medium">{{ scope.row.sfkqecsb === 1 ? '已启用' : '未启用' }}</el-tag>
            </template>
            </el-table-column>-->
            <el-table-column label="操作" align="right" fixed="right" width="240">
              <template slot-scope="scope">
                <div class="operations">
                  <el-button type="text" :disabled="quanxianBtns.btn4" class="Btn_nan" @click="getKakouChakanList(scope.row)">卡口{{ scope.row.right }}</el-button>
                  <span class="operation"></span>
                  <!-- :disabled="quanxianBtns.btn5" -->
                  <el-button type="text" class="Btn_nan" @click="addSheB(scope.row)" :disabled="scope.row.cds === 0 || quanxianBtns.btn5 ? true : false">绑定设备{{ scope.row.right }}</el-button>
                  <el-tooltip class="item" effect="dark" v-show="scope.row.cds === 0" content="请先绑定卡口，并选择好车道" placement="top">
                    <i style="font-size: 14px" class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <span class="operation"></span>
                  <el-button type="text" class="Btn_nan" :disabled="quanxianBtns.btn2" @click="addUser('编辑电子警察', scope.row)">编辑</el-button>
                  <span class="operation"></span>
                  <el-button type="text" class="color_f56f6f Btn_nan" :disabled="quanxianBtns.btn3" @click="kaDetele(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <div class="bigBOx btnBefore">
                <div class="imgBox">
                  <svg class="iconfont imgIcon" aria-hidden="true">
                    <use xlink:href="#el-icon-mybinding" />
                  </svg>
                  <span>已绑定设备</span>
                </div>
              </div>
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="45.8%" :close-on-click-modal="false" @close="offFZ">
      <span slot="title" class="dialogTitle">电子警察绑定设备</span>
      <ul class="addSheBei">
        <!-- <li>
              <div class="select2">
                <span>辖区:</span>
                <el-cascader
                  placeholder="请选择 / 搜索"
                  v-model="addShebei.xiaqu"
                  filterable
                  :options="cityOptions"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  clearable
                  class="selectItem"
                ></el-cascader>
              </div>
            </li>
            <li>
              <div class="select2">
                <span>设备类型:</span>
                <el-cascader
                  v-model.trim="addShebei.sblx"
                  :options="shebeilxOptions"
                  :props="{ checkStrictly: true }"
                  filterable
                  clearable
                  class="selectItem2"
                ></el-cascader>
              </div>
        </li>-->
        <li>
          <el-radio-group v-model="addShebei.sblx" @change="leixingss">
            <el-radio :label="1">设备</el-radio>
            <el-radio :label="2">前卫主机</el-radio>
            <!-- <el-radio :label="3">卡口</el-radio> -->
          </el-radio-group>
        </li>
        <li>
          <el-input :placeholder="kakouTitleName" v-model.trim="addShebei.ss" clearable class="selectItem3"></el-input>
          <el-button type="primary" size="small" class="addShebSearch btnSizeStyle" @click="searchShebei">搜索</el-button>
        </li>
      </ul>
      <el-table
        style="margin-top: 50px"
        ref="multipleTable2"
        @select="isCheck2"
        @select-all="isCheckAll2"
        @row-dblclick="rowClick"
        max-height="360"
        border
        :data="addSheBeiName"
        highlight-current-row
        :default-sort="{ prop: 'zcmc', order: 'descending' }"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="bindLoadTableFlag"
      >
        <template slot="empty">
          <span v-html="bindMessage"></span>
        </template>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column :label="addShebei.sblx !== 3 ? '设备列表' : '卡口名称'" :prop="addShebei.sblx !== 3 ? 'zcmc' : 'kkmc'" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="设备类型" prop="zclxmc" v-if="addShebei.sblx !== 3 ? true : false" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="辖区地址" prop="xqmc" show-overflow-tooltip min-width="150">
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc }}</template>
        </el-table-column>
        <el-table-column label="设备IP" min-width="120" prop="ip" v-if="addShebei.sblx !== 3 ? true : false"></el-table-column>
        <el-table-column label="端口" prop="gldk" v-if="addShebei.sblx !== 3 ? true : false"></el-table-column>
      </el-table>
      <span slot="footer">
        <div class="footerPagination">
          <el-pagination
            background
            layout="prev, pager, next, total"
            @current-change="addHandleCurrentChange"
            :current-page.sync="addCurrentPage"
            :total="addTotal"
            :hide-on-single-page="paginationValue"
          ></el-pagination>
          <el-button class="btnSizeStyle" type="primary" @click="addSheBeiXiaB" :disabled="addSheBeiName2.length > 0 ? false : true" size="small" v-show="addShebei.sblx !== 3 ? true : false"
            >下一步</el-button
          >
          <el-button class="btnSizeStyle" type="primary" @click="submitSheBei" :disabled="addSheBeiName2.length > 0 ? false : true" size="small" v-show="addShebei.sblx !== 3 ? false : true"
            >确定</el-button
          >
        </div>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible2" :close-on-click-modal="false" width="45.8%" @close="offsheb">
      <span slot="title" class="dialogTitle">车道信息配置</span>
      <el-table
        max-height="360"
        :data="addSheBeiName2"
        border
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <el-table-column type="expand" v-if="addShebei.sblx === 1 ? false : true">
          <template slot-scope="scope">
            <ul class="zhujiBox">
              <li v-for="item in scope.row.expandList" :key="item.id" ref="shenmgui">
                <div class="zhujiBoxTitle">{{ item.zcmc }}</div>
                <el-select v-model="chedao[item.id]" multiple collapse-tags clearable placeholder="请选择" class="zhujiBoxSelect1">
                  <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="chaoxian[item.id]" clearable :no-data-text="tiText1" placeholder="请选择" class="zhujiBoxSelect2">
                  <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </li>
              <li class="cneterNull" v-show="scope.row.expandList.length === 0 ? true : false">主机暂未绑定设备</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="已选设备" prop="zcmc" width="350"></el-table-column>
        <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '选择车道', '控制车道')">
          <template slot-scope="scope">
            <el-select
              v-model="chedao[scope.row.id]"
              multiple
              :disabled="scope.row.zclx === 53 ? true : false"
              v-show="addShebei.sblx === 1 ? true : false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '选择朝向的方向', '朝向')" width="160">
          <template slot-scope="scope">
            <el-select
              v-model="chaoxian[scope.row.id]"
              :disabled="scope.row.zclx === 53 ? true : false"
              v-show="addShebei.sblx === 1 ? true : false"
              :no-data-text="tiText1"
              clearable
              placeholder="请选择"
            >
              <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <!-- 控制车道 -->
      <!-- <div class="lasIcon" :style="addShebei.sblx === 1 ? 'left: 438px;' : 'left: 482px;'">
        <el-tooltip content="选择车道" placement="top" effect="light">
          <i class="el-icon-warning-outline lasIcon_icon"></i>
        </el-tooltip>
      </div>-->
      <!-- 朝向 -->
      <!-- <div class="lasIcon2">
        <el-tooltip content="选择朝向的方向" placement="top" effect="light">
          <i class="el-icon-warning-outline lasIcon_icon"></i>
        </el-tooltip>
      </div>-->
      <span slot="footer">
        <el-button class="btnSizeStyle" @click="shangYiBu" size="small">上一步</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="submitSheBei" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="电子警察详情" :visible.sync="contractDialogVisible" class="dialogText">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="jbxx">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">电子警察名称：</span>
                <span>{{ contractDetailList.dzjcmc }}</span>
              </el-row>
              <el-row class="rowRelative">
                <span class="contentFont">辖区(安装地址)：</span>
                <span>{{ contractDetailList.sfmc + contractDetailList.csmc + contractDetailList.xqmc + contractDetailList.jdmc + contractDetailList.xxdz }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">坐标(经度/纬度) ：</span>
                <span>{{ contractDetailList.gpszb }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">车道数：</span>
                <span>{{ contractDetailList.cds }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">电子警察入网码：</span>
                <span>{{ contractDetailList.dzjcrwbm }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">关联编号1：</span>
                <span>{{ contractDetailList.glbh1 }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">关联编号2：</span>
                <span>{{ contractDetailList.glbh2 }}</span>
              </el-row>
            </el-col>
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">添加人：</span>
                <span>{{ contractDetailList.createBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">添加时间：</span>
                <span>{{ contractDetailList.tjsj | dateFormat }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新人：</span>
                <span>{{ contractDetailList.updateBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新时间：</span>
                <span>{{ contractDetailList.updateDate | dateFormat }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="图片信息" name="tpxx">
          <el-row class="p_15">
            <el-col :span="24" class="lineHight">
              <el-row style="position: relative">
                <span class="contentFont" style="position: absolute; top: 5px">竣工图：</span>
                <span style="margin-left: 105px">
                  <span v-if="yuLanTP(contractDetailList.jgt).length > 0">
                    <el-image
                      v-for="(item, index) in yuLanTP(contractDetailList.jgt)"
                      :key="index"
                      :style="{ width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }"
                      :src="item"
                      :preview-src-list="yuLanTP(contractDetailList.jgt)"
                    >
                      <div slot="error" class="image-slot">
                        <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                      </div>
                    </el-image>
                  </span>
                  <span v-else :style="{ display: 'inline-block', width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }">
                    <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                  </span>
                </span>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" type="primary" @click="contractDialogVisible = false">关 闭</el-button>
      </div>
      <!-- <div class="dialogText">
        <el-row>
          <el-col :span="12" class="lineHight">
            <el-row>
              <span class="contentFont">添加时间：</span>
              {{ contractDetailList.tjsj | dateFormat }}
            </el-row>
            <el-row>
              <span class="contentFont">道路等级：</span>
              <span style="color: #e6a23c">{{ contractDetailList.dldj }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">方向数：</span>
              <span style="color: #e6a23c">{{ contractDetailList.fxs }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">竣工图：</span>
              <el-image
                style="width: 35px; height: 40px; vertical-align: middle"
                :src="contractDetailList.jgt ? yuLanTP(contractDetailList.jgt)[0] : ''"
                :preview-src-list="yuLanTP(contractDetailList.jgt)"
              >
                <div slot="error" class="image-slot">
                  <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                </div>
              </el-image>
            </el-row>
          </el-col>
          <el-col :span="10" class="lineHight"> </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="contractDialogVisible = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="contractDialogVisible = false">确 定</el-button>
      </div>-->
    </el-dialog>
    <!-- 删除卡口 -->
    <el-dialog title="删除" :visible.sync="dialogVisibleDetele" width="30%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisibleDetele = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="deleteItem" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移除设备 -->
    <el-dialog title="移除设备" :visible.sync="dialogVisibleDetele2" width="30%">
      <span>您确定要移除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisibleDetele2 = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="deleteItem2" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移除卡口设备 -->
    <el-dialog title="删除卡口" :visible.sync="dialogVisibleDetele3" width="30%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" @click="dialogVisibleDetele3 = false">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="deleteItem3">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible3" :close-on-click-modal="false" width="45.8%" @close="guanbiCK" class="right_item">
      <!-- <span slot="title" class="dialogTitle">查看绑定关系</span> -->
      <span slot="title" class="dialogTitle">电子警察绑定详情</span>
      <el-form label-width="120px" :model="chakanform" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电子警察名称：" class="chakanTitle">
              <span>{{ chakanform.kkmc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子警察入网码：" class="chakanTitle">
              <span>{{ chakanform.kklx }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车道数：" class="chakanTitle">
              <span>{{ chakanform.chedao }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方向数：" class="chakanTitle">
              <span>{{ chakanform.fangxian }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-radio-group v-model="chakanRadio" size="medium" @change="chakanRadioChange">
        <el-radio-button :label="1">设备</el-radio-button>
        <el-radio-button :label="2">前卫主机</el-radio-button>
        <el-radio-button :label="3">卡口</el-radio-button>
      </el-radio-group>
      <el-table
        max-height="360"
        :data="chakanlist"
        @expand-change="expandChange"
        border
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      >
        <el-table-column type="expand" v-if="chakanRadio !== 2 ? false : true">
          <template slot-scope="scope">
            <ul class="zhujiBox2">
              <li v-for="item in scope.row.cds" :key="item.id" ref="shenmgui">
                <div class="zhujiBox2Title">{{ item.zcmc }}</div>
                <div class="zhujiBox2Select1">
                  <ul class="chakanChedao">
                    <li v-for="(item2, index2) in item.cds" :key="item2.id">{{ item2.dzjc_CDMC }}{{ item.cds.length - 1 === index2 ? '' : '、' }}</li>
                  </ul>
                </div>
                <div class="zhujiBox2Select2">
                  <span>{{ item.fxmc }}</span>
                </div>
                <div class="zhujiBox2Select3">
                  <el-popover placement="bottom-end" trigger="manual" data-container="body" :ref="`popover2-${item.id}`" @hide="guanbiPopover">
                    <el-form label-width="70px" :model="chakansSelectform" size="small" class="chakanSelectBox">
                      <el-form-item label="控制车道: ">
                        <el-select v-model="chakansSelectform.chadaoshu" multiple collapse-tags clearable placeholder="请选择" style="width: 250px">
                          <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="朝向: ">
                        <el-select v-model="chakansSelectform.chaoxian" :no-data-text="tiText1" clearable placeholder="请选择" style="width: 250px">
                          <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <div style="margin: 0">
                          <el-button size="mini" @click="$refs[`popover2-${item.id}`][1].doClose()">取消</el-button>
                          <el-button type="primary" size="mini" @click="bianjichangkan(item, '主机')">确定</el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                    <el-button type="text" @click="bianjichedaocaoxian(item)" slot="reference" class="Btn_nan">编辑</el-button>
                  </el-popover>
                </div>
              </li>
              <li class="cneterNull" v-show="scope.row.cds === null ? true : false">主机暂未绑定设备</li>
            </ul>
          </template>
        </el-table-column>
        <!-- <el-table-column
              label="已绑定设备"
              prop="zcmc"
              v-if="chakanRadio === 1 ? true : false"
              width="200"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="已绑定设备"
              prop="zjmc"
              v-else-if="chakanRadio === 2 ? true : false"
              width="200"
              show-overflow-tooltip
        ></el-table-column>-->
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column :label="chooseLabel()" prop="kkmc" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="chakanRadio === 1 ? true : false">{{ scope.row.zcmc }}</span>
            <span v-else-if="chakanRadio === 2 ? true : false">{{ scope.row.zjmc }}</span>
            <el-button v-else-if="chakanRadio === 3 ? true : false" type="text" class="Btn_nan" @click="tiaozhuankk(scope.row)">{{ scope.row.kkmc }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="chakanRadio === 3 ? '' : '控制车道'" :width="chakanRadio === 3 ? '0' : '300'">
          <template slot-scope="scope">
            <ul class="chakanChedao" v-show="chakanRadio === 1 ? true : false">
              <li v-for="(item, index) in scope.row.cds" :key="item.id">{{ item.dzjc_CDMC }}{{ scope.row.cds.length - 1 === index ? '' : '、' }}</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column :label="chakanRadio === 3 ? '' : '朝向'" :width="chakanRadio === 3 ? '0' : '150'">
          <template slot-scope="scope">
            <span>{{ scope.row.zccx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" fixed="right" min-width="80">
          <template slot-scope="scope">
            <el-popover placement="bottom-end" data-container="body" trigger="manual" :ref="`popover-${scope.$index}`" @hide="guanbiPopover">
              <el-form label-width="70px" :model="chakansSelectform" size="small" class="chakanSelectBox">
                <el-form-item label="控制车道: ">
                  <el-select v-model="chakansSelectform.chadaoshu" multiple collapse-tags clearable placeholder="请选择" style="width: 250px">
                    <el-option v-for="item in chedaoOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="朝向: ">
                  <el-select v-model="chakansSelectform.chaoxian" clearable :no-data-text="tiText1" placeholder="请选择" style="width: 250px">
                    <el-option v-for="item in fanXianOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <div style="margin: 0">
                    <el-button size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
                    <el-button type="primary" size="mini" @click="bianjichangkan(scope, '设备')">确定</el-button>
                  </div>
                </el-form-item>
              </el-form>
              <el-button type="text" slot="reference" class="Btn_nan" v-if="chakanRadio === 1 ? true : false" @click="bianjichedaocaoxian(scope)">编辑</el-button>
            </el-popover>
            <span class="operation" v-if="chakanRadio === 1 ? true : false"></span>
            <el-button v-if="chakanRadio === 3 ? false : true" type="text" @click="yichuSheb(scope.row)" class="color_f56f6f Btn_nan" :disabled="quanxianBtns.btn6">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="footerPagination">
        <el-pagination
          background
          layout="prev, pager, next, total"
          @current-change="chakanChange"
          :current-page.sync="chakanPage"
          :total="chakanTotal"
          :hide-on-single-page="chakanPaginationValue"
        ></el-pagination>
        <div>
          <el-button class="btnSizeStyle" @click="dialogVisible3 = false" size="small">取 消</el-button>
          <el-button class="btnSizeStyle" type="primary" @click="dialogVisible3 = false" size="small" v-preventReClick>确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 卡口添加 -->
    <el-dialog :visible.sync="xuanzhevisible" width="45.8%" :close-on-click-modal="false" @close="kakouOffFZ">
      <span slot="title" class="dialogTitle">选择卡口</span>
      <ul class="addSheBei">
        <li>
          <el-input placeholder="输入卡口名称" v-model.trim="xuanzheList.ss" clearable class="selectItem3"></el-input>
          <el-button type="primary" size="small" class="addShebSearch btnSizeStyle" @click="searchKakou">搜索</el-button>
        </li>
      </ul>
      <el-table
        ref="multipleTable"
        style="margin-top: 50px"
        @select="kakouIsCheck2"
        @select-all="kakouIsCheckAll2"
        @row-dblclick="rowClick2"
        max-height="360"
        border
        :data="addKakouName"
        highlight-current-row
        :default-sort="{ prop: 'zcmc', order: 'descending' }"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="kaKouTableLoad"
      >
        <template slot="empty">
          <span v-html="getKaKouMessage"></span>
        </template>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="卡口名称" prop="kkmc" sortable show-overflow-tooltip></el-table-column>
        <el-table-column label="辖区地址" prop="xqmc" show-overflow-tooltip min-width="150">
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.xqmc + scope.row.jdmc + scope.row.xxdz }}</template>
        </el-table-column>
        <el-table-column label="道路等级" prop="dldjmc" min-width="50"></el-table-column>
        <el-table-column label="车道数" prop="cds" min-width="50"></el-table-column>
      </el-table>
      <span slot="footer">
        <div class="footerPagination">
          <el-pagination
            background
            layout="prev, pager, next, total"
            @current-change="addKakouHandleCurrentChange"
            :current-page.sync="addKakouCurrentPage"
            :total="addKakouTotal"
            :hide-on-single-page="KakoupaginationValue"
          ></el-pagination>
          <div>
            <el-button class="btnSizeStyle" @click="guanbiaddKakouXiaB" size="small">取消</el-button>
            <el-button class="btnSizeStyle" type="primary" @click="addKakouXiaB" :disabled="addKakouNameList.length > 0 ? false : true" size="small">确定</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
    <!-- 添加卡口 -->
    <el-dialog :visible.sync="chakanKakouvisible" width="45.8%" :close-on-click-modal="false" @close="chakanOffFZ">
      <span slot="title" class="dialogTitle">卡口信息</span>
      <ul class="addSheBei">
        <li>
          <el-button class="btnSizeStyle" type="primary" size="small" @click.stop="kakouBtn">选择卡口</el-button>
        </li>
      </ul>
      <el-table
        style="margintop: 20px"
        max-height="360"
        :data="addKakouName2"
        border
        highlight-current-row
        :header-row-style="{ height: '38px' }"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '38px', borderBottom: '1px solid #CEE1F7', paddingTop: '8px', paddingBottom: '8px' }"
        v-loading="kaKouLoad2"
      >
        <template slot="empty">
          <span v-html="kaKouListMessage"></span>
        </template>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <ul class="zhujiBox">
              <li v-for="item in scope.row.kaKouCheDaoList" :key="item.id" ref="shenmgui">
                <div class="zhujiBoxTitle">{{ item.cdbh }}</div>
                <el-select @change="chedaoChange" v-model="kakouChedao[item.id]" clearable placeholder="请选择" class="zhujiBoxSelect1">
                  <el-option v-for="item in kakouChedaoOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </li>
              <li class="cneterNull" v-show="scope.row.kaKouCheDaoList.length === 0 ? true : false">暂无数据</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="卡口名称" prop="kkmc" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="辖区地址" width="200">
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.xqmc + scope.row.jdmc + scope.row.xxdz }}</template>
        </el-table-column>
        <el-table-column label="电子警察车道"></el-table-column>
        <el-table-column label="操作" min-width="30">
          <template slot-scope="scope">
            <el-button type="text" @click.prevent="removeDomain(scope.row)" class="color_f56f6f">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <div>
          <el-button class="btnSizeStyle" @click.stop="chakanKakouvisible = false" size="small">取 消</el-button>
          <el-button class="btnSizeStyle" type="primary" :disabled="addKakouName2.length <= 0 ? true : false" @click="baoCun" size="small">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { ziC } from '@/utils/allUrl.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import dzjcchedao from '@/utils/dzjcchedao.json' // 电子警察车道
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { isNotEmpty } from '@/assets/js/Empty.js'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  data() {
    return {
      // ping
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treesBox: {
        url: 'DIAN_JING',
        GZKZ: false,
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      options: [],
      jgmcOptions: [],
      harderBox: {
        nameList: '',
        value1: '',
      },
      addShebei: {
        xiaqu: '',
        sblx: 1,
        ss: '',
      },
      // addKkShebei: {
      //   xiaqu: '',
      //   ss: ''
      // },
      rolelist: [], // 资产列表
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      pingTitle: [],
      paginationValue: false, // 数据为一条时隐藏
      addTotal: 0, // 设备
      addCurrentPage: 1, // 设备
      // paginationValue2: false, // 数据为一条时隐藏
      // addTotal2: 0, // 卡口
      // addCurrentPage2: 1, // 卡口
      dialogVisible: false, // 添加设备1
      dialogVisible2: false, // 添加设备2
      // dialogVisible3: false, // 添加
      contractDialogVisible: false, // 详情
      dialogVisibleDetele: false, // 删除
      dialogVisibleDetele2: false, // 移除设备
      dialogVisibleDetele3: false, // 移除
      dialogVisible3: false, // 查看绑定关系
      zhuJiSelect: false, // 查看主机下绑定信息
      num: 0,
      searchFZ: '', // 分组搜索
      addSheBeiName: [],
      addSheBeiName2: [],
      // kouAddSheBeiName: [], // 卡口数据源
      // addkoukaName: [], // 添加卡口勾选数据
      // 资产绑定至前卫主机form
      HostAssets: {
        name: '',
      },
      Hostrules: {
        name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
      },
      contractDetailList: [
        {
          htbh: '123',
        },
      ], // 卡口详情数据
      kakoulxOptions: [], // 卡口类型
      // 删除卡口id
      deleteID: '',
      // 辖区
      // cityOptions: '',
      // shebeilxOptions: '', // 设备类型
      chedao: [], // 绑定车道
      chaoxian: [], // 绑定方向
      chedaoOptions: [], // 车道
      fanXianOptions: [], // 方向
      dzID: '', // 电子警察ID
      // addKKID: '', // 添加卡口
      yichuID: {
        dzjcid: '',
        kkid: '',
        zcid: '',
        type: '',
      }, // 移除设备ID
      // yichuKKDZID: '', // 移除卡口电子ID
      // 行数据的Key
      // getRowKeys(row) {
      //   return row.id
      // },
      // expands: [],
      iconBtn: 'el-icon-arrow-right',
      iconBtnShow: false,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
        btn4: true,
        btn5: true,
        btn6: true,
      },
      kakouTitleName: '输入设备名称或设备IP',
      chakanform: {
        kkmc: '',
        kklx: '',
        chedao: '',
        fangxian: '',
        kkid: '',
      },
      chakanRadio: 1, // 查看单选框
      chakanPage: 1, // 查看分页
      chakanTotal: 0, // 查看分页总数
      chakanPaginationValue: false, // 查看分页数据为一条时隐藏
      chakanlist: [],
      chakansSelectform: {
        chadaoshu: [],
        chaoxian: '',
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      chakanKakouvisible: false, // 查看卡口弹窗
      xuanzhevisible: false, // 选择卡口弹框
      addKakouName: [], // 选择卡口数据源
      addKakouName2: [], // 选择卡口后的数据
      addKakouCurrentPage: 1,
      addKakouTotal: 0,
      KakoupaginationValue: false, // 数据为一条时隐藏
      xuanzheList: {
        ss: '',
      },
      addKakouNameList: [], // 添加卡口数据
      chakandzjcidbm: '', // 电子警察街道编码
      chakandzjcId: '', // 电子警察id
      yichuKKID: '', // 移除卡口ID
      kakouChedao: [], // 绑定车道
      // 电子警察车道
      kakouChedaoOptions: dzjcchedao,
      tiText1: '暂无数据', // 方向类型
      kaKouTableLoad: false, // 卡口表格加载
      kaKouLoad2: false, // 添加卡口时查询卡口加载
      kaKouListMessage: '',
      getKaKouMessage: '',
      addr: '', // 拼接后完整辖区地址

      bindLoadTableFlag: false, // 绑定设备表单加载
      bindMessage: '', // 绑定设备界面提示信息
      activeName: 'jbxx',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created() {
    this.jurisdictionBtn()
    // 获取用户辖区
    // const city = JSON.parse(getUrl('district'))
    // this.cityOptions = city
    // // 获取电子警察列表
    this.getZiList()
    // 获取方向列表
    this.getFangxian()
  },
  components: { Ping, treesBox },
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    handleClick() {},
    loadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    // 绑定设备加载
    bindLoadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.bindLoadTableFlag) {
          this.bindLoadTableFlag = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    getzcmc(row) {
      return `<span>${row.dzjcmc}</span>`
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_KKDJGL_DZJCLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'dzjc:insertDianZiJingCha') {
              this.quanxianBtns.btn1 = false // 添加
            } else if (item2.qxdm === 'dzjc:updateDianZiJingCha') {
              this.quanxianBtns.btn2 = false // 修改
            } else if (item2.qxdm === 'dzjc:deleteDianZiJingCha') {
              this.quanxianBtns.btn3 = false // 删除
            } else if (item2.qxdm === 'zcgl:bdDianZiJingCha:kakou') {
              this.quanxianBtns.btn4 = false // 卡口信息
            } else if (item2.qxdm === 'zcgl:bdDianZiJingCha') {
              this.quanxianBtns.btn5 = false // 绑定资产
            } else if (item2.qxdm === 'zcgl:jcBdByDzjc') {
              this.quanxianBtns.btn6 = false // 解除资产绑定关系
            }
          })
        }
      })
    },
    caonima() {
      if (this.iconBtn === 'el-icon-arrow-right') {
        this.iconBtnShow = true
        return (this.iconBtn = 'el-icon-arrow-down')
      } else {
        this.iconBtnShow = false
        return (this.iconBtn = 'el-icon-arrow-right')
      }
    },
    // 获取电子警察列表
    async getZiList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
      // const { data: res } = await this.$http.post(`${ziC}dzjc/selectDianZiJingCha`, params)
      // // clearTimeout(a)
      // // endLoading()
      // if (res.code === '0014') {
      //   return
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // // const abcd = JSON.stringify(res.data.list)
      // // const newCity = abcd.replace(/ziChanList/, 'children')

      // // this.rolelist = JSON.parse(newCity)
      // this.rolelist = res.data.list
      // this.total = res.data.countList
      // console.log(this.rolelist)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}dzjc/selectDianZiJingCha`, params)
      switch (res.code) {
        case '0000':
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // // 选择辖区或者资产分组
    // async handleNodeClick(e) {
    //   this.pageSize = 10
    //   this.currentPage = 1
    //   this.searchBtn(1, 10, e)
    //   this.xianQu = e
    // },
    // 卡口详情
    userBox(scope) {
      this.activeName = 'jbxx'
      this.contractDialogVisible = true
      this.contractDetailList = scope
    },
    yuLanTP(val) {
      const arr = []
      if (val) {
        const aiya = JSON.parse(val)
        aiya.forEach((item) => {
          arr.push(item.url)
        })
      }
      return arr
    },
    addUser(title, scope) {
      if (title === '添加电子警察') {
        this.$router.push({
          name: 'addElectronicPolice', // 路由
          query: {
            // 传递参数
            title: title,
          },
        })
      } else {
        this.$router.push({
          name: 'addElectronicPolice', // 路由
          query: {
            // 传递参数
            title: title,
            content: scope.id,
          },
        })
      }
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 查询
    async searchBtn(val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { nameList, value1 } = this.harderBox
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SFBM', val.label)
        } else if (val.levels === 2) {
          params.append('CSBM', val.label)
        } else if (val.levels === 3) {
          params.append('XQBM', val.label)
        } else if (val.levels === 4) {
          params.append('JDBM', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SFBM', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CSBM', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('XQBM', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('JDBM', this.xianQu.label)
          }
        }
      }
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('DZJCMC', nameList)
      if (value1 !== null) {
        params.append('TJSJSTART', value1[0] || '')
        params.append('TJSJEND', value1[1] || '')
      }
      // params.append('M_', size)
      // params.append('N_', current)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
      // const { data: res } = await this.$http.post(`${ziC}dzjc/selectDianZiJingCha`, params)
      // if (res.code === '0014') {
      //   return
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   this.rolelist = []
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.rolelist = res.data.list || []
      // this.total = res.data.countList
    },
    // 搜索设备
    async searchShebei() {
      clearTimeout(this.tableTimer)
      this.bindMessage = ''
      this.bindLoadTable()
      this.bindLoadTableFlag = true
      const { xiaqu, sblx, ss } = this.addShebei
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (sblx === 1) {
        params.append('QCZCLX', 53)
      } else if (sblx === 2) {
        params.append('ZCLX', 53)
      }
      params.append('XZJD', xiaqu)
      params.append('userId', user.id)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      params.append('BDZT', 0)
      params.append('ZCMC_IP_XH', ss)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
      this.bindLoadTableFlag = false
      if (res.code === '0013') {
        this.addTotal = 0
        this.bindMessage = `<svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mywarning" />
                </svg>【${this.addr}】没有设备或设备已被绑定！`
        return (this.addSheBeiName = [])
      }
      // res.data.list.forEach(item => {
      //   if (item.bdzt === 0) {
      //     arr.push(item)
      //   }
      // })
      this.addSheBeiName = res.data.list
      this.addTotal = res.data.countList
    },
    // 卡口搜索
    async searchShebei2() {
      const { xiaqu, ss } = this.addShebei
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('JDBM', xiaqu)
      params.append('userId', user.id)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      // params.append('JGID', user.zzjg_ID)
      params.append('KKMC', ss)
      const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      if (res.code === '0013') {
        this.addTotal = 0
        return (this.addSheBeiName = [])
      }
      this.addSheBeiName = res.data.list
      this.addTotal = res.data.countList
    },
    handleSizeChange(size) {
      this.currentPage = 1
      this.pageSize = size
      this.searchBtn()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.searchBtn()
    },
    Dayin() {
      // 判断iframe是否存在，不存在则创建iframe
      var iframe = document.getElementById('printIframe')
      if (!iframe) {
        var el = document.getElementById('printcontent')
        iframe = document.createElement('IFRAME')
        var doc = null
        iframe.setAttribute('id', 'printIframe')
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        // 这里可以自定义样式
        // doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
        doc.write('<div>' + el.innerHTML + '</div>')
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe)
      }
    },
    // 关闭分组
    offFZ() {
      this.dialogVisible = false
      this.addTotal = 0
      this.addCurrentPage = 1
      this.addShebei.ss = ''
      this.addSheBeiName = []
    },
    offsheb() {
      this.$refs.multipleTable2.clearSelection()
      this.chedao = []
      this.chaoxian = []
      this.addSheBeiName2 = []
    },
    // offkk: function() {
    //   this.$refs.multipleTable.clearSelection()
    //   this.addkoukaName = []
    //   this.addTotal2 = 0
    //   this.addCurrentPage2 = 1
    //   this.addKkShebei = {
    //     xiaqu: '',
    //     ss: ''
    //   }
    // },
    async submitSheBei() {
      const { sblx } = this.addShebei
      const params = new URLSearchParams()
      if (sblx === 1) {
        const arrs = []
        this.addSheBeiName2.forEach((item) => {
          const obj = {
            ZCID: item.id,
            CD: this.chedao[item.id],
            FX: this.chaoxian[item.id],
          }
          arrs.push(obj)
        })
        params.append('dbJson', JSON.stringify(arrs))
      } else if (sblx === 2) {
        const arrs2 = []
        const arrs3 = []
        this.addSheBeiName2.forEach((item) => {
          arrs2.push(item.id)
          item.expandList.forEach((item2) => {
            const obj2 = {
              ZCID: item2.id,
              CD: this.chedao[item2.id],
              FX: this.chaoxian[item2.id],
            }
            arrs3.push(obj2)
          })
        })
        params.append('ZJID', arrs2)
        params.append('dbJson', JSON.stringify(arrs3))
      } else if (sblx === 3) {
        const kaArr = []
        this.addSheBeiName2.forEach((item3) => {
          kaArr.push(item3.id)
        })
        params.append('KKID', kaArr)
      }
      params.append('DZJCID', this.dzID)
      params.append('BDLX', sblx)
      const { data: res } = await this.$http.post(`${ziC}zcgl/bdDianZiJingCha`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      if (sblx !== 3) {
        this.dialogVisible2 = false
        this.getZiList()
        this.offsheb()
      } else {
        this.getZiList()
        this.offFZ()
      }
    },
    async getFangxian() {
      // 方向字典
      const { data: fan } = await this.$http.post(`${ziC}fxzd/selectFangXiang`)
      const arr = []
      if (fan.code !== '0000') {
        this.fanXianOptions = arr
        this.tiText1 = fan.message
      } else {
        fan.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.fxmc,
          }
          arr.push(k)
        })
        this.fanXianOptions = arr
      }
    },
    // 添加设备
    async addSheB(scope) {
      // 车道字典
      const arr2 = []
      // 车道数
      scope.kaKouCheDaoList.forEach((item) => {
        const k2 = {
          value: item.id,
          label: item.dzjc_CDBH || '',
        }
        arr2.push(k2)
      })
      this.chedaoOptions = arr2
      this.dzID = scope.id
      this.dialogVisible = true
      this.addShebei.xiaqu = scope.jdbm
      this.addShebei.sblx = 1
      this.addr = scope.sfmc + scope.csmc + scope.xqmc + scope.jdmc
      this.searchShebei()
    },
    // 添加设备复选框
    isCheck2(selection, row) {
      this.addSheBeiName2 = selection
    },
    // 添加设备复选框全选
    isCheckAll2(selection, row) {
      this.addSheBeiName2 = selection
    },
    addSheBeiXiaB() {
      const { sblx } = this.addShebei
      if (sblx === 2) {
        this.addSheBeiName2.forEach((item) => {
          item.expandList = []
          this.gaigechuizi(item, '绑定')
        })
      }
      this.dialogVisible = false
      this.dialogVisible2 = true
    },
    // tabsChange(selection, evt) {
    //   const a = this.expands.findIndex(item => item === selection.id)
    //   if (a !== -1) {
    //     this.expands.splice(a, 1)
    //   } else {
    //     this.expands = []
    //     if (selection) {
    //       this.expands.push(selection.id)
    //     }
    //   }
    //   this.yichuKKDZID = selection.id
    // },
    shangYiBu() {
      this.dialogVisible = true
      this.dialogVisible2 = false
      this.addShebei.sblx = 1
      this.searchShebei()
    },
    kaDetele(scope) {
      this.deleteID = scope.id
      this.dialogVisibleDetele = true
    },
    // 删除
    async deleteItem() {
      this.dialogVisibleDetele = false
      const params = new URLSearchParams()
      params.append('ID', this.deleteID)
      const { data: res } = await this.$http.post(`${ziC}dzjc/deleteDianZiJingCha`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.reload()
      this.getZiList()
    },
    // 卡口选择
    kakouBtn() {
      this.addKakouClose()
      this.xuanzhevisible = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('JDBM', this.chakandzjcidbm)
      params.append('ISNOTBIND', 0)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      this.setKakouList(params)
    },
    // 添加设备复选框
    kakouIsCheck2(selection, row) {
      this.addKakouNameList = selection
    },
    // 添加设备复选框全选
    kakouIsCheckAll2(selection, row) {
      this.addKakouNameList = selection
    },
    kakouOffFZ() {
      this.xuanzhevisible = false
      this.addKakouName = []
      this.addKakouNameList = []
      this.addKakouTotal = 0
      this.addKakouCurrentPage = 1
    },
    addKakouHandleCurrentChange(val) {
      this.addKakouCurrentPage = val
      this.searchKakou()
    },
    // // 选择搜索条件
    searchKakou() {
      const { ss } = this.xuanzheList
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('M_', this.addKakouCurrentPage)
      params.append('N_', 10)
      params.append('JDBM', this.chakandzjcidbm)
      params.append('ISNOTBIND', 0)
      params.append('KKMC', ss)
      this.setKakouList(params)
    },
    guanbiaddKakouXiaB() {
      this.kakouOffFZ()
      const obj = {
        jdbm: this.chakandzjcidbm,
        id: this.chakandzjcId,
      }
      this.getKakouChakanList(obj)
    },
    async addKakouXiaB() {
      const kaArr = []
      this.addKakouNameList.forEach((item3) => {
        kaArr.push(item3.id)
      })
      const params = new URLSearchParams()
      params.append('DZJCID', this.chakandzjcId)
      params.append('KKID', kaArr)
      params.append('BDLX', 3)
      const { data: res } = await this.$http.post(`${ziC}zcgl/bdDianZiJingCha`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.kakouOffFZ()
      const obj = {
        jdbm: this.chakandzjcidbm,
        id: this.chakandzjcId,
      }
      this.getKakouChakanList(obj)
    },
    async setKakouList(params) {
      this.getKaKouMessage = ''
      this.kaKouTableLoad = true
      try {
        const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
        switch (res.code) {
          case '0000':
            this.addKakouName = res.data.list
            this.addKakouTotal = res.data.countList
            break
          case '0013':
            this.addKakouName = []
            this.addKakouTotal = 0
            this.getKaKouMessage = `<svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mywarning" />
                </svg>【${this.addr}】没有卡口或卡口已被绑定！`
            break
          default:
            this.addKakouName = []
            this.addKakouTotal = 0
            break
        }
      } catch (error) {
        console.log(error)
      }
      this.kaKouTableLoad = false
      // if (this.addKakouName2.length > 0) {
      //   this.addKakouName.forEach(item => {
      //     this.addKakouName2.forEach(item2 => {
      //       if (item2.id === item.id) {
      //         setTimeout(() => {
      //           this.$nextTick(() => {
      //             this.$refs.multipleTable.toggleRowSelection(item, true)
      //           })
      //         })
      //       }
      //     })
      //   })
      // }
    },
    // 删除卡口
    removeDomain(item) {
      this.yichuKKID = item
      this.dialogVisibleDetele3 = true
      // const index = this.addKakouName2.indexOf(item)
      // if (index !== -1) {
      //   this.addKakouName2.splice(index, 1)
      // item.kaKouCheDaoList.forEach(vals => {
      //   this.kakouChedaoOptions.forEach(item2 => {
      //     if (item2.value === this.kakouChedao[vals.id]) {
      //       item2.disabled = false
      //     }
      //   })
      //   this.kakouChedao[vals.id] = null // 删除车道
      // })
      // }
    },
    chedaoChange(val) {
      // if (val) {
      this.kakouChedaoOptions.forEach((item) => {
        if (item.value === this.kakouChedao.find((items) => items === item.value)) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
      // }
    },
    // 点击添加卡口时查询卡口方法
    async getKakouChakanList(scope) {
      this.kaKouListMessage = ''
      this.chakanKakouvisible = true
      this.kaKouLoad2 = true
      this.chakandzjcidbm = scope.jdbm
      this.chakandzjcId = scope.id
      // 省份名称不为空时则进行缓存赋值
      if (isNotEmpty(scope.sfmc)) {
        this.addr = scope.sfmc + scope.csmc + scope.xqmc + scope.jdmc
      }
      const params = new URLSearchParams()
      params.append('DZJC_ID', scope.id)
      const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      this.kaKouLoad2 = false
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.addKakouName2 = []
        this.kaKouListMessage = `<svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mywarning" />
                </svg>暂未绑定卡口！`
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      // 回显绑定卡口数据源
      this.addKakouName2 = res.data.list
      this.addKakouName2.forEach((item) => {
        // 回显绑定卡口车道数据源
        item.kaKouCheDaoList.forEach((item2) => {
          this.kakouChedao[item2.id] = item2.dzjc_CDBH
        })
      })
      // 回显电子警察车道数禁用
      this.kakouChedao.forEach((item4) => {
        this.chedaoChange(item4)
      })
    },
    // 移除设备
    yichuSheb(item) {
      this.dialogVisibleDetele2 = true
      if (item.zc_ID) {
        this.yichuID = {
          dzjcid: item.dzjc_ID,
          kkid: item.kk_ID,
          zcid: item.zc_ID,
          type: item.bdlx,
        }
      } else {
        this.yichuID = {
          dzjcid: item.dzjc_ID,
          kkid: item.kk_ID,
          zcid: item.zj_ID,
          type: item.bdlx,
        }
      }
    },
    // 移除卡口
    async deleteItem3() {
      const params = new URLSearchParams()
      params.append('BDLX', 3)
      params.append('KKID', this.yichuKKID.id)
      params.append('DZJCID', this.chakandzjcId)
      const { data: res } = await this.$http.post(`${ziC}zcgl/jcBdByDzjc`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisibleDetele3 = false
      this.yichuKKID.kaKouCheDaoList.forEach((vals) => {
        this.kakouChedaoOptions.forEach((item2) => {
          if (item2.value === this.kakouChedao[vals.id]) {
            item2.disabled = false
          }
        })
        this.kakouChedao[vals.id] = null // 删除车道
      })
      const obj = {
        jdbm: this.chakandzjcidbm,
        id: this.chakandzjcId,
      }
      this.getKakouChakanList(obj)
    },
    // 移除设备
    async deleteItem2() {
      const { kkid, dzjcid, zcid, type } = this.yichuID
      const params = new URLSearchParams()
      if (kkid) {
        params.append('KKID', kkid)
      }
      if (zcid) {
        params.append('ZCID', zcid)
      }
      params.append('BDLX', type)
      params.append('DZJCID', dzjcid)
      const { data: res } = await this.$http.post(`${ziC}zcgl/jcBdByDzjc`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisibleDetele2 = false
      this.getZiList()
      this.guanbiCK()
      this.yichuID = {
        dzjcid: '',
        kkid: '',
        zcid: '',
        type: '',
      }
      // this.expands = []
    },
    yuanChenKZ(scope) {
      if (scope.ZCLXMC === '运维主机') {
        localStorage.setItem('SN', scope.SBXLH)
        localStorage.setItem('password', scope.DLMM)
        localStorage.setItem('IP', scope.IP)
        localStorage.setItem('XQBM', scope.XQBM)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.ZCMC)
        this.$router.push({ name: 'mainboaredit' })
        // this.$router.push('/mainboard')
      } else {
        window.open('http://' + scope.IP, '_blank')
      }
    },
    showPingOk(scope) {
      this.ping.speedOpen = true
      this.ping.ip = scope.IP
      this.ping.name = scope.ZCMC
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.searchBtn(e.type)
      this.xianQu = e.type
    },
    reload() {
      this.shuaxingTree = false
      this.$nextTick(() => (this.shuaxingTree = true))
    },
    // 添加设备
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.searchShebei()
    },
    // 添加卡口
    // addHandleCurrentChange2(val) {
    //   this.addCurrentPage2 = val
    //   // this.searchShebei()
    // },
    chakanChange(val) {
      this.chakanPage = val
      this.getChakanList()
    },
    // 查看电子警察绑定
    kakoubandin(val) {
      // 车道字典
      const arr2 = []
      val.kaKouCheDaoList.forEach((item) => {
        const k2 = {
          value: item.id,
          label: item.dzjc_CDBH || '',
        }
        arr2.push(k2)
      })
      this.chedaoOptions = arr2
      this.dialogVisible3 = true
      this.chakanRadio = 1
      this.chakanform = {
        kkmc: val.dzjcmc,
        kklx: val.dzjcrwbm,
        chedao: val.cds,
        fangxian: val.fxs,
        kkid: val.id,
      }
      this.getChakanList()
    },
    guanbiCK() {
      // 关闭弹出框
      const popoverClose = Object.values(this.$refs)
      popoverClose.forEach((item) => {
        if (item) {
          if (item.doClose) {
            item.doClose()
          }
        }
      })
      this.dialogVisible3 = false
      this.chakanRadio = 1
      this.chakanPage = 1
      this.chakanTotal = 0
      this.chakanform = {
        kkmc: '',
        kklx: '',
        chedao: '',
        fangxian: '',
        kkid: '',
      }
    },
    chakanRadioChange(val) {
      this.chakanRadio = val
      this.getChakanList()
    },
    async getChakanList() {
      const { kkid } = this.chakanform
      const params = new URLSearchParams()
      params.append('M_', this.chakanPage)
      params.append('N_', 10)
      params.append('DZJC_ID', kkid)
      params.append('BDLX', this.chakanRadio)
      const { data: res } = await this.$http.post(ziC + 'dzjcbd/list', params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.chakanlist = []
        this.chakanTotal = 0
        // this.chakanlist.forEach(item => {
        //   if (item.id === selection.id) {
        //     item.expandList = []
        //     // item.isLoadings = false
        //   }
        // })
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.chakanTotal = res.data.countList
      this.chakanlist = res.data.list
    },
    leixingss(val) {
      if (val === 1) {
        this.kakouTitleName = '输入设备名称或设备IP'
        this.addShebei.sblx = val
        this.searchShebei()
      } else if (val === 2) {
        this.kakouTitleName = '输入主机名称或主机IP'
        this.addShebei.sblx = val
        this.searchShebei()
      } else {
        this.kakouTitleName = '输入卡口名称'
        this.searchShebei2()
      }
    },
    expandChange(selection, evt) {
      if (evt.length < 1) {
        return
      }
      this.gaigechuizi(selection, '查看')
    },
    async gaigechuizi(selection, type) {
      const params = new URLSearchParams()
      // params.append('BDZT', 0)
      if (type === '查看') {
        params.append('YWZJBD_ID', selection.zj_ID)
        params.append('HQCD', 1)
      } else {
        params.append('YWZJBD_ID', selection.id)
      }
      params.append('userId', JSON.parse(getUrl('userconter')).id)
      const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.addSheBeiName2.forEach((item) => {
          if (item.id === selection.id) {
            item.expandList = []
            // item.isLoadings = false
          }
        })
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      if (type === '查看') {
        this.chakanlist.forEach((itemx) => {
          if (itemx.zjmc === selection.zjmc) {
            itemx.cds = res.data.list
          }
        })
      } else {
        this.addSheBeiName2.forEach((item) => {
          if (item.id === selection.id) {
            item.expandList = res.data.list
          }
        })
      }
    },
    async bianjichangkan(val, type) {
      const { chadaoshu, chaoxian } = this.chakansSelectform
      const params = new URLSearchParams()
      if (type === '设备') {
        params.append('ZCID', val.row.zc_ID)
      } else {
        params.append('ZCID', val.id)
      }
      params.append('CX', chaoxian)
      params.append('CDS', chadaoshu)
      const { data: res } = await this.$http.post(`${ziC}zcgl/updateCdCx`, params)
      if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      type === '设备' ? val._self.$refs[`popover-${val.$index}`].doClose() : this.$refs[`popover2-${val.id}`][1].doClose()
      this.guanbiPopover()
      this.getChakanList()
    },
    guanbiPopover() {
      // this.chakansSelectform = {
      //   chadaoshu: [],
      //   chaoxian: ''
      // }
    },
    // 跳转卡口页面
    tiaozhuankk(val) {
      if (val.kkmc) {
        this.$router.push({
          name: 'bayonetList', // 路由
          params: {
            // 传递参数
            value: val.kkmc,
          },
        })
      }
    },
    bianjichedaocaoxian(val) {
      const popoverClose = Object.keys(this.$refs)
      const arr = []
      if (val.row) {
        this.chakansSelectform.chaoxian = val.row.fx_ID || ''
        popoverClose.forEach((item) => {
          if (item !== `popover-${val.$index}`) {
            if (item.substr(0, 8) === 'popover-') {
              if (this.$refs[item] && this.$refs[item].doClose) {
                this.$refs[item].doClose()
              }
            }
          }
        })
        this.$refs[`popover-${val.$index}`].doShow()
        val.row.cds.forEach((item3) => {
          arr.push(item3.cdid)
        })
      } else {
        this.chakansSelectform.chaoxian = val.fx_ID || ''
        popoverClose.forEach((item) => {
          if (item !== `popover2-${val.id}`) {
            if (item.substr(0, 8) === 'popover2') {
              if (this.$refs[item].length > 0 && this.$refs[item][1].doClose) {
                this.$refs[item][1].doClose()
              }
            }
          }
        })
        this.$refs[`popover2-${val.id}`][1].doShow()
        val.cds.forEach((item2) => {
          arr.push(item2.cdid)
        })
      }
      this.chakansSelectform.chadaoshu = arr
    },
    // 关闭查看卡口窗口
    chakanOffFZ() {
      this.chakanKakouvisible = false
      this.addKakouName2 = []
      this.kakouChedao = []
      this.getZiList()
    },
    // 卡口点击选择卡口信息时关闭窗口,不进行电子警察表单加载
    addKakouClose() {
      // clearTimeout(this.tableTimer)
      // this.tableLoad = false
      this.chakanKakouvisible = false
    },
    // 绑定卡口车道数
    async baoCun() {
      if (this.kakouChedao.length === 0 || this.addKakouName2.length === 0) {
        return this.$message({
          type: 'error',
          message: '请先选择卡口下车道对应的电子警察车道信息!',
          center: true,
        })
      }
      var biduiChe = []
      this.addKakouName2.forEach((item5) => {
        biduiChe = [...item5.kaKouCheDaoList, ...biduiChe]
      })
      const arrChedao = [] // 车道数
      this.kakouChedao.forEach((item) => {
        if (item) {
          const chedaoVal = {
            ID: this.kakouChedao.indexOf(item),
            DZJC_CDBH: item,
          }
          arrChedao.push(chedaoVal)
        }
      })
      const kakouId = []
      this.addKakouName2.forEach((item6) => {
        kakouId.push(item6.id)
      })
      let nums = 0
      biduiChe.forEach(async (item4) => {
        if (this.kakouChedao[item4.id]) {
        } else {
          const aas = this.$message({
            type: 'error',
            message: '请先选择卡口下车道对应的电子警察车道信息!',
            center: true,
          })
          if (nums > 0) {
            return aas.close()
          }
          nums = nums + 1
        }
      })
      if (nums === 0) {
        const params = new URLSearchParams()
        params.append('DZJCID', this.chakandzjcId)
        params.append('CDJSON', JSON.stringify(arrChedao))
        console.log(arrChedao)
        const { data: res } = await this.$http.post(`${ziC}dzjc/updateDianZiJingChaCheDao`, params)
        if (res.code === '0014') {
          return
        } else if (res.code !== '0000') {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
        this.$message({
          type: 'success',
          message: res.message,
          center: true,
        })
        this.chakanOffFZ()
        this.getZiList()
      }
    },
    renderHeader(h, { column, $index }, labelTips, labelText) {
      return h('div', { class: '', style: 'padding-top:4px;' }, [
        h('span', labelText),
        h(
          'el-tooltip',
          {
            props: {
              content: labelTips,
              placement: 'top',
              effect: 'light',
              offset: '10',
            },
          },
          [
            h('span', {}, [
              h('i', {
                class: 'el-icon-warning-outline',
                style: 'margin-left:6px;font-size: 14px;color: #c8c8c8;cursor: pointer;',
              }),
            ]),
          ]
        ),
      ])
    },
    rowClick(row, column, event) {
      const a = this.addSheBeiName2.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        this.addSheBeiName2.splice(a, 1)
        this.$refs.multipleTable2.toggleRowSelection(row, false)
      } else {
        this.addSheBeiName2.push(row)
        const s1 = new Set(this.addSheBeiName2)
        this.addSheBeiName2 = [...s1]
        this.$refs.multipleTable2.toggleRowSelection(row, true)
      }
    },
    rowClick2(row, column, event) {
      const a = this.addKakouNameList.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        this.addKakouNameList.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
        console.log(this.addKakouNameList)
      } else {
        this.addKakouNameList.push(row)
        const s1 = new Set(this.addKakouNameList)
        this.addKakouNameList = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    // 电子警察查看绑定关系时选择label名称
    chooseLabel() {
      switch (this.chakanRadio) {
        case 1:
          return '设备名称'
        case 2:
          return '主机名称'
        case 3:
          return '卡口名称'
        default:
          return ''
      }
    },
    // bianjichedaocaoxian(val) {
    //   const arr = []
    //   if (val.row) {
    //     this.$refs[`popover-${val.$index}`].doShow()
    //     val.row.cds.forEach(item3 => {
    //       arr.push(item3.cdid)
    //     })
    //   } else {
    //     this.$refs[`popover2-${val.id}`][1].doShow()
    //     val.cds.forEach(item2 => {
    //       arr.push(item2.cdid)
    //     })
    //   }
    //   this.chakansSelectform.chadaoshu = arr
    // }
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-icon-circle-close {
//   font-size: 45px;
// }
.left_box {
  border-right: 1px solid #f0f0f0;
  .left_item {
    padding: 15px 5px;
    .el-radio-group {
      display: flex;
      .el-radio-button {
        width: 50%;
        height: 32px;
        line-height: 32px;
      }
    }
    .tree_box {
      margin-top: 10px;
      .usersNumber2 {
        display: flex;
        width: 135px;
        cursor: pointer;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        position: relative;
      }
      .usersNumber2:after {
        content: '...';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
      }
    }
  }
}
::v-deep table {
  width: 100% !important;
}
.right_box {
  .search_btn {
    width: 280px;
  }
  .right_item {
    padding-top: 15px;
    .btn_header {
      height: 35px;
      line-height: 34px;
      margin-bottom: 15px;
      > li:first-child {
        margin-left: 0;
      }
      > li:last-child {
        float: right;
      }
      > li {
        float: left;
        margin-left: 10px;

        .select {
          > span {
            font-weight: 600;
            margin-right: 5px;
          }
        }
      }
    }
    .el-table {
      margin-top: 15px;
      border: 1px solid #eaeaea;
      border-bottom: 0;
      .minImg {
        margin-right: 5px;
      }
      .operation {
        display: inline-block;
        margin: 0 5px;
        height: 10px;
        border-left: 1px solid #b3b3b3;
      }
      .Btn_nan {
        padding: 0;
      }
    }
    // .fooer_box {
    //   height: 48px;
    //   line-height: 47px;
    //   padding: 0 15px;
    //   box-sizing: border-box;
    //   border-top: none;
    //   border: 1px solid #eaeaea;
    //   border-top: 0;
    //   display: flex;
    //   justify-content: space-between;
    //   .el-pagination {
    //     padding: 6px 5px;
    //   }
    //   .shoujiBtn {
    //     height: 35px;
    //   }
    //   .bigBOx {
    //     align-items: center;
    //     display: flex;
    //     .imgBox {
    //       .imgIcon {
    //         width: 14px;
    //         height: 14px;
    //         margin: 0 3px 0 25px;
    //       }
    //       > span {
    //         color: #6d7278;
    //       }
    //     }
    //   }
    // }
    .test-speed1 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      background-color: pink;
    }
    .ping_box {
      width: 100%;
      height: 300px;
      background-color: rgba(0, 0, 0, 0.8);
      overflow: auto;
      > li {
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
        color: #f0f0f0;
      }
    }
  }
  .dialogTitle {
    font-size: 15px;
    font-weight: 600;
  }
  .addSheBei {
    > li:first-child {
      // margin-left: 0;
      float: left;
    }
    > li {
      height: 35px;
      line-height: 35px;
      float: right;
      // margin-left: 10px;
      .selectItem3 {
        width: 300px;
      }
      .addShebSearch {
        margin-left: 10px;
      }
    }
    .select2 {
      > span {
        font-weight: 600;
        margin-right: 5px;
      }
      .selectItem {
        width: 200px;
        line-height: 0;
      }
      .selectItem2 {
        width: 200px;
        line-height: 0;
      }
    }
  }
  // .addSheBei2 {
  //   display: flex;
  //   justify-content: space-between;
  //   > li {
  //     .selectItem5 {
  //       margin-top: 2px;
  //       width: 280px;
  //     }
  //     .addShebSearch2 {
  //       margin-left: 10px;
  //     }
  //   }
  //   .select3 {
  //     > span {
  //       font-weight: 600;
  //       margin-right: 5px;
  //     }
  //     .selectItem4 {
  //       width: 250px;
  //     }
  //   }
  // }
  .input-with-select {
    width: 50%;
    .searchFZ_btn {
      width: 40px;
      padding: 10.5px;
      margin: 0;
      background-color: #f5f7fa;
    }
  }
  .dropDown {
    margin-top: 15px;
    width: 840px;
    height: 305px;
    border: 1px solid #eaeaea;
    overflow: auto;
    > li {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      border-bottom: 1px solid #eaeaea;
    }
  }
  .Hostform {
    margin-bottom: 15px;
    .Hostselect {
      width: 260px;
    }
  }
  .lasIcon {
    position: absolute;
    top: 93px;
    left: 440px;
    .lasIcon_icon {
      font-size: 14px;
      color: #c8c8c8;
      cursor: pointer;
    }
  }
  .lasIcon2 {
    position: absolute;
    top: 94px;
    right: 127px;
    .lasIcon_icon {
      font-size: 14px;
      color: #c8c8c8;
      cursor: pointer;
    }
  }
  .dialogText {
    font-size: 14px;
    color: #333;
    .star {
      color: #f56c6c;
    }
    .contentFont {
      display: inline-block;
      width: 103px;
      color: #7a7a7a;
      text-align: right;
    }
    .lineHight .el-row {
      line-height: 40px;
    }
  }
  .openSheBei {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid #ebeef5;
    > span {
      position: relative;
      margin-left: 4%;
      .cao {
        position: absolute;
        top: 5px;
        left: -25px;
        cursor: pointer;
      }
    }
    .el-tag {
      position: absolute;
      left: 18%;
    }
    .cedao {
      position: absolute;
      left: 35%;
    }
    .caoxian {
      position: absolute;
      left: 70%;
    }
    .el-link {
      margin-top: -3px;
    }
  }
  .openSheBei2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid #ebeef5;
    > span {
      margin-left: 4%;
    }
    .el-tag {
      position: absolute;
      left: 18%;
    }
    .el-link {
      margin-top: -3px;
    }
  }
  .footerPagination {
    display: flex;
    justify-content: space-between;
  }
  .zhujiBox {
    > li {
      height: 40px;
      // line-height: 40px;
      // padding: 20px 0;
      display: flex;
      align-items: center;
      // border-bottom: 1px solid #ebeef5;
      .zhujiBoxTitle {
        // line-height: 40px;
        position: relative;
        // top: 0;
        left: 10%;
      }
      .zhujiBoxSelect1 {
        width: 30%;
        position: absolute;
        // top: 0;
        left: 49%;
      }
      .zhujiBoxSelect2 {
        width: 16%;
        position: absolute;
        // top: 0;
        right: 1%;
      }
    }
  }
  .zhujiBox2 {
    > li {
      height: 40px;
      // line-height: 40px;
      // padding: 20px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      .zhujiBox2Title {
        // line-height: 40px;
        position: relative;
        // top: 0;
        left: 10%;
      }
      .zhujiBox2Select1 {
        width: 30%;
        position: absolute;
        // top: 0;
        left: 31%;
      }
      .zhujiBox2Select2 {
        width: 16%;
        position: absolute;
        // top: 0;
        right: 10%;
      }
      .zhujiBox2Select3 {
        // width: 16%;
        position: absolute;
        // top: 0;
        right: 1.3%;
      }
    }
  }
  .chakanTitle {
    color: #333;
    padding: 0;
    margin-bottom: 0;
  }
  .el-radio-group {
    width: 220px;
    display: flex;
    .el-radio-button {
      width: 50%;
      height: 32px;
      line-height: 32px;
    }
  }
  .chakanChedao {
    > li {
      float: left;
    }
  }
  .cneterNull {
    display: flex;
    justify-content: center;
  }
  .img_shouji2 {
    width: 16px;
    height: 16px;
  }
  .imgIcon {
    vertical-align: middle;
    width: 18px !important;
    height: 18px !important;
  }
}
.chakanSelectBox {
  // display: flex;
  // align-items: center;
  padding: 15px 15px 0 15px;
}
::v-deep .el-table__expanded-cell {
  padding: 0 !important ;
}
</style>
